<template>
  <div class="Music">
    <div class="header">
      <div class="tol">
        <div class="go-back" @click="$router.back()">
            <img src="../../assets/img/room/fan.png" alt="" />
        </div>
        <div class="second">
          <div class="one">
            <img src="../../assets/img/room/yy1.png" alt="" />
          </div>
          <div class="er">
            <p>大鹅的房间</p>
            <p>房号：1111</p>
          </div>
          <div class="three">
            <p>关注</p>
          </div>
        </div>
      </div>
      <div class="tol2">
        <div class="six">
          <p>6</p>
        </div>
        <div class="yy">
          <img src="../../assets/img/room/yy2.png" alt="" />
        </div>
        <div class="last">
          <img src="../../assets/img/room/yy7.png" alt="" />
        </div>
      </div>
    </div>
    <div class="main">
      <div class="left">
        <ul>
          <li class="zhu">
           <div class="liu">
           <p>6</p>
           </div>
            <img src="../../assets/img/room/yy1.png" alt="" />
            <p class="fang">房主</p>
            <p>大鹅</p>
          </li>
          <li>
            <div class="liu">
            <p>6</p>
           </div>
           <img src="../../assets/img/room/yy1.png" alt="" />
            <p>无名氏</p>
          </li>
          <li>
              <div class="liu">
           <p>6</p>
           </div>
            <img src="../../assets/img/room/yy1.png" alt="" />
            <p>半塘</p>
          </li>
          <li>
              <div class="liu">
            <p>6</p>
           </div>
          <div class="mic">
              <img src="../../assets/img/room/mic.png" alt="" />
              </div>
            <p>无名氏</p>
          </li>
        </ul>
      </div>
      <div class="center">
        <div class="zz">
          <div class="min">
            <p class="my">我的词语</p>
          <p class="heng">--</p>
          </div>
          
        </div>
        <div class="btn">
          <p>准备阶段</p>
          
        </div>
       
        <div class="inp">
          <span>玩家轮流描述自己的词，根据描述内容，找出谁的词与众不同，即为“卧底”</span>
        </div>
      </div>
      <div class="right">
        <ul>
          <li>
             <div class="liu">
            <p>6</p>
           </div>
            <div class="mic">
              <img src="../../assets/img/room/mic.png" alt="" />
              </div>
            <p>无名氏</p>
          </li>
          <li>
              <div class="liu">
            <p>6</p>
           </div>
             <div class="mic">
              <img src="../../assets/img/room/mic.png" alt="" />
              </div>
            <p>无名氏</p>
          </li>
          <li>
              <div class="liu">
           <p>6</p>
           </div>
             <div class="mic">
              <img src="../../assets/img/room/mic.png" alt="" />
              </div>
            <p>半塘</p>
          </li>
          <li>
            <div class="liu">
           <p>6</p>
           </div>
              <div class="mic">
              <img src="../../assets/img/room/mic.png" alt="" />
              </div>
            <p>无名氏</p>
          </li>
        </ul>
      </div>
    </div>
    <h3 class="hh">大鹅 加入了派对</h3>
    <p class="pp">大鹅发起了卧底征召</p>
    <div class="td-big">
      欢迎来到派对!平台严禁未成年人充值打赏，和诱使未成年人打赏,请大家共同遵守、监督。派对内24小时在线巡查，严禁出现违法违规、低俗色情、赌博涉政等内容。如遇他人以陪玩、送礼、线下见面等方式诱导打赏、私下交易，请勿轻信，以防人身或财产损失。注意财产安全，谨防网络诈骗。
    </div>
    <h3 class="hh">我的房间我做主</h3>
    <div class="footer">
      <div class="first">
    <img src="../../assets/img/room/yy3.png" alt="" />
      </div>
      <div class="ss">
        <input type="text" placeholder="说点什么...." />
         <div class="smile">
       <van-icon name="smile-o" />
       </div>
      </div>
      <ul>
        <li>
<img src="../../assets/img/room/yy4.png" alt="" />
        </li>
        <li>
<img src="../../assets/img/room/yy5.png" alt="" />
        </li>
        <li>
<img src="../../assets/img/room/yy6.png" alt="" />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  methods: {},
};
</script>

<style lang="scss">
.Music {
  margin: 0 auto;
  background: linear-gradient(0deg, #21488C 0%, #3F72C3 100%);
  p {
    font-size: 20px;
  }
  .header {
    width: 100%;
    height: 85px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    .tol {
      display: flex;
      justify-content: space-around;
    }
    .go-back {
      width: 48px;
      height: 48px;
      color: #9a9a9a;
      margin-left: 14px;
      img{
       width: 23px;
      height: 36px;
      margin-top: 10px;
      }

    }
    .second {
      width: 286px;
      height: 56px;
      line-height: 40px;
      border-radius: 18px;
      text-align: center;
      display: flex;
      justify-content: space-around;
      position: relative;
    }
    .one {
      width: 52px;
      height: 52px;
      background-color: #666666;
      border-radius: 50%;
      line-height: 40px;
      text-align: center;
      position: absolute;
      left: 10px;
      img{
         width: 52px;
      height: 52px;
      }
    }
    .er {
      width: 231px;
      height: 52px;
      font-size: 8px;
      text-align: center;
      background: linear-gradient(0deg, #21488C 0%, #3F72C3 100%);
      border-radius: 30px;
      p{
        height: 20px;
        padding-right: 40px;
        color:#FFFFFF;

      }   
    }
    .three {
      width: 72px;
      height:52px;
      background: linear-gradient(90deg, #7E55FB 0%, #E1908F 100%);
      border-radius: 50%;
      line-height: 18px;
      text-align: center;
      line-height: 48px;
       position: absolute;
       left: 220px;
    }
    .tol2 {
      display: flex;
      justify-content: space-around;
      .six {
        width: 48px;
        height: 48px;
        background: linear-gradient(0deg, #21488C 0%, #3F72C3 100%);
        border-radius: 50%;
        line-height: 48px;
        text-align: center;
        margin-right: 15px;
        color: white;
      }
      .yy {
        width: 52px;
        height: 52px;
        background: linear-gradient(0deg, #21488C 0%, #3F72C3 100%);
        border-radius: 50%;
        line-height: 40px;
        text-align: center;
        margin-right: 15px;
        img{
        width: 28px;
        height: 28px;
        color: white;
        margin-top: 10px;
        }
      }
      .last {
        width: 52px;
        height: 52px;
        color: #9a9a9a;
        line-height: 40px;
        font-size: 30px;
        text-align: center;
        margin-right: 20px;
        margin-top: 10px;
        img{
          width: 6px;
          height: 32px;
        }
      }
    }
  }
  .main {
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    li {
      height: 134px;
      width: 112px;
      background-color: #99C0F7;
      border-radius: 20px;
      margin-bottom: 20px;
      border-bottom: 2px solid #cecece;
      position: relative;
      border: none;
      .liu{
        width: 29px;
        height: 29px;
        background-color: #EDA357;
        border: 1px solid #FFE6C9;
        border-radius: 50px;
        position: absolute; 
        top: -8px;
        left: 8px;
        font-size: 22px;
        font-weight: 500;
        color: #FFFFFF;
         
      }
      img {
        width: 88px;
        height: 88px;
        background-color: #A4C8F8 ;
        border-radius: 50%;
        margin-left: 10px;
        margin-top: 10px;
      }
       .mic{
      width: 84px;
      height: 84px;
      border-radius: 50%;
      margin-left: 15px;

      background-color: #A4C8F8 ;
     }
     .mic img{
      width:  26px;
      height: 32px;
      margin-left: 25px;
      margin-top: 25px;
      background-color: #A4C8F8 ;
      
    }
      p {
        text-align: center;
        margin: 0 auto;
      } .mic{
      width: 84px;
      height: 84px;
      border-radius: 50%;
      background-color: #A4C8F8 ;
    }
    }
    
    .zhu {
      position: relative;
    }
    .fang {
      position: absolute;
      bottom: 30px;
      left: 35px;
      background: linear-gradient(90deg, #FFB968 0%, #EDA357 100%);
      border-radius: 20px;
      width: 36px;
      height: 18px;
      font-size: 14px;
    }

    .center {
      width: 60%;
      height: 300px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-direction: column;
      align-content: center;
      margin-top: 60px;
      .zz {
      width: 200px;
      height: 120px;
      background: linear-gradient(0deg, #C4DAF9 0%, #FDFEFF 100%);
      border-radius: 20px;
      text-align: center;
      margin-top: 35px;
      .min{
         width: 200px;
        height: 120px;
        .my{
        width: 110px;
        height: 27px;
        margin-top: 25px;
        margin-left: 40px;
      }
     .heng{
        width: 110px;
        height: 3px;
        margin-left: 40px;
        margin-top: 25px;
        margin-bottom: 35px;
        font-size: 30px;

      }
      }
      
    }
      .btn {
      margin-top: 50px;
      font-size: 24px;
      text-align: center;
      width: 236px;
      height: 76px;
      border-radius: 30px;
      color: #FFFFFF;
      background-color: #255DB8 ;
     p{
      width: 236px;
      height: 76px;
      line-height: 76px;
     } 
    }
    }  
    .inp{
        width: 219px;
        height: 444px;
        color: #FFFFFF;
        font-size: 26px;
        margin-top: 30px;
      }
    p {
      font-size: 24px;
    }
  }
  .td-big {
    width: 546px;
    height: 222px;
    margin-top: 60px;
    background: linear-gradient(0deg, #21488C 0%, #3F72C3 100%);
    border-radius: 20px;
    margin-left: 20px;
    font-size: 22px;
    color: #D1BE3D;

  }
  .hh {
    width: 204px;
    height: 48px;
    font-size: 24px;
    text-align: center;
    font-weight: normal;
    margin-top: 50px;
    border-radius: 30px;
    margin-left: 30px;
    line-height: 56px;
    color: #A2C2F0;
    background: linear-gradient(0deg, #21488C 0%, #3F72C3 100%);
  }
  .pp {
    width: 238px;
    height: 48px;
    font-size: 24px;
    text-align: center;
    margin-top: 20px;
    border-radius: 30px;
    margin-left: 30px;
    line-height: 56px;
    color: #A2C2F0;
    background: linear-gradient(0deg, #21488C 0%, #3F72C3 100%);
  }
  .footer {
    width: 100%;
    height: 120px;
    bottom: 0;
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
      img{
         width: 56px;
        height: 56px;
      }
    .first {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background-color: #efefef;
    }
    .ss{
      position: relative;
    }
    .ss input {
      width: 442px;
      height: 56px;
      font-size: 20px;
      border-radius: 44px;
      background-color: #375B8F;
    }
    .smile{
      width: 40px;
      height: 40px;
      font-size: 40px;
      position: absolute;
      right: 10px;
      bottom: 10px;
      color: white;
    }
    ul {
      display: flex;
      justify-content: space-around;
      li {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        margin-left: 10px;
        background-color: #efefef;
      }
    }
  }
}
</style>